﻿
@{
    ViewBag.Title = "用户首页";
    Layout = "~/Views/Shared/_Layout_Content.cshtml";
    Layout = "~/Views/Shared/_Layout_tittle.cshtml";
}
@section styles
    {
    <environment names="Development">
        <link href="~/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="~/css/grid.min.css" asp-append-version="true" />
    </environment>
    <style>
        .instail h3 {
            margin-top: 0px;
        }

        .map-body {
            margin-bottom: 20px;
        }
        .header {
            height: 80px;
        }

        .formsearch {
            margin-top: 20px;
        }

        .header .box {
            width: 100%;
            height: 80px;
            background-color: #ccc;
            box-shadow: 0px 1px 10px #ccc;
        }
        .bottom_fenye {
            width: 270px;
            margin: 0 auto;
        }
        .kong_bai {
            height: 30px;
        }
    </style>
}
<script type="text/javascript" src="~/js/echarts.js" charset="UTF-8"></script>
<!--
    作者：007
    时间：2018-04-25
    描述：echarts.js和bmap.js有特定的加载顺序，不能出错
-->
<script src="~/js/bmap.js" charset="UTF-8"></script>
<script src="~/js/jquery-3.2.1.min.js" charset="UTF-8"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/AdminLTE-2.4.2/dist/js/adminlte.js"></script>
<link rel="stylesheet" href="~/lib/Font-Awesome-master/css/font-awesome.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
<link rel=" stylesheet" href="~/lib/AdminLTE-2.4.2/dist/css/AdminLTE.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="~/lib/AdminLTE-2.4.2/dist/css/skins/skin-blue.css">
<!--接入百度地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZO22gS0FcRGKZ1icOy3kR4ej9DDgu6lB"></script>



<div class="header">
    <div class="box">
        <div class="col-xs-8 col-xs-offset-2">
            <form asp-action="_Index" method="get" name="myform">
                <div class="formsearch input-group">
                    <input id="txtSearchKey" type="text" name="SearchStrings" class="input form-control" value="@ViewData["currentFilters"]" placeholder="搜索关键字" />
                    <span class="input-group-btn">
                        <button id="btnSearch" class="btn btn btn-primary"><i class="fa fa-search"></i>搜索</button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="map-body col-xs-12">
    <div class="map col-sm-7">
        <div id="main" style="height:480px;"></div>
    </div>
    <div class="instail col-sm-5">
        <h3 class="text-primary">航班详情信息</h3>
        <!--<hr style="border:1px solid #ccc;" />-->
        <table class="table table-condensedv table-striped">
            <tr>
                <th>航空公司</th>
                <th>航班号</th>
            </tr>
            <tr>
                <td id="ac1"></td>
                <td id="flightnum1"></td>
            </tr>
            <tr>
                <th>日期</th>
                <th>飞机型号</th>
            </tr>
            <tr>
                <td id="dayTime1"></td>
                <td id="type1"></td>
            </tr>

            <tr>
                <th>始发地</th>
                <th>目的地</th>
            </tr>
            <tr>
                <td id="starting_point1"></td>
                <td id="end1"></td>
            </tr>
            <tr>
                <th>计划出发时间</th>
                <th>计划到达时间</th>
            </tr>
            <tr>
                <td id="aaaTime"></td>
                <td id="bbbTime"></td>
            </tr>

            <tr>
                <th>实际出发时间</th>
                <th>实际到达时间</th>
            </tr>
            <tr>
                <td id="commonTime1"></td>
                <td id="bTime1"></td>

            </tr>
            <tr>
                <th>延误状态</th>
                <th>飞行时长</th>
            </tr>
            <tr>
                <td id="isDelay1"></td>
                <td id="FTime"></td>
            </tr>
        </table>
    </div>
</div>



<div class="col-xs-12">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">历史航班详情表</font></font></h3>
            <h3 class="pages box-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">第</font></font></h3>
            <h3 class="pagess box-title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">一共</font></font></h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive no-padding">
            <table class="table2 table table-hover">
                <tr>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">航班号</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">飞机型号</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">日期</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">起点城市</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">终点城市</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">起飞机场</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">降落机场</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">航空公司</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">飞行时间</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">计划出发时间</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">计划到达时间</font></font></th>
                    <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">详情</font></font></th>
                </tr>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.box -->
</div>
<div class="bottom_fenye">
    <div class="page">
        <form asp-action="_Index" method="get" name="myform">
            <table>
                <tr>
                    <td>
                        <div class="fenye_1 input-group">
                            <button id="btn" name="page" class="btn btn-primary btn-sm">上一页</button>
                        </div>
                    </td>
                    <td>
                        <div class="fenye_1 input-group ">
                            <input type="number" name="SearchString" value="@ViewData["currentFilter"]" class="form-control" placeholder="跳转页数" style="height:30px;width:100px" />
                            <span class="input-group-btn">
                                <button id="btnss" name="pageadds" class="btn btn-default btn-sm">跳转</button>
                            </span>
                        </div>
                    </td>
                    <td>
                        <div class="fenye_1 input-group">
                            <button id="btns" name="pageadds" class="btn btn-primary btn-sm">下一页</button>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
        <div class="kong_bai"></div>
    </div>
</div>

@section scripts
    {
    <environment names="Development">
        <script src="~/js/plugins/jqgrid/jquery.jqGrid.js"></script>
        <script src="~/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
        <script src="~/js/jqgrid-list.js"></script>
        <script src="~/js/json2.js"></script>
        <script src="~/js/base.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/js/grid.min.js" asp-append-version="true"></script>
    </environment>
}


<script>

    var Data = [];
       $.ajax({
            url: '@Url.Action("GetListWithPager")',
            type: "get",
            dataType: "Json",
            success: function (resp, status)
            {
                for (var i = 0; i < 1; i++)
                {
                    var bjdt = [{ name: resp.rows[0].homeIcao }, { name: resp.rows[0].pointIcao }, { name: resp.rows[0].starting_points }];
                    Data.push(bjdt);
                };

                for (i = 0; i < resp.rows.length; i++) {
                    var isDelay;
                    var Delay = resp.rows[i].bbTime - resp.rows[i].bbbTime;
                    if (Delay > 0)
                    {
                        isDelay = "晚点"
                    }
                    else
                    {
                        if (Delay == 0)
                        { isDelay = "准点" }
                        else (Delay < 0)
                        { isDelay = "提前" }
                    }

                    var unixtime = resp.rows[i].aaTime;
                    var unixTimestamp = new Date(unixtime * 1000);
                    var aaTime = unixTimestamp.toLocaleString();

                    if (resp.rows[i].bbTime == null) {
                        var bbTime = "— — — — — — — —";
                        isDelay = "未知"
                    }
                    else {
                        var unixtime = resp.rows[i].bbTime;
                        var unixTimestamp = new Date(unixtime * 1000);
                        var bbTime = unixTimestamp.toLocaleString();
                    }
                    var unixtime = resp.rows[i].aaaTime;
                    var unixTimestamp = new Date(unixtime * 1000);
                    var aaaTime = unixTimestamp.toLocaleString();

                    if (resp.rows[i].bbbTime == null)
                    {
                        var bbbTime = "— — — — — — — —";
                        isDelay = "未知"
                    }
                    else {
                        var unixtime = resp.rows[i].bbbTime;
                        var unixTimestamp = new Date(unixtime * 1000);
                        var bbbTime = unixTimestamp.toLocaleString();
                    }
                    //$("#flightnum").html("<td>"+flightnum+"</td>");
                    $("#flightnum1").text(resp.rows[i].flightnum);
                    $("#type1").text(resp.rows[i].type);
                    $("#dayTime1").text(resp.rows[i].dayTime);
                    $("#starting_point1").text(resp.rows[i].starting_point);
                    $("#end1").text(resp.rows[i].end);
                    $("#ac1").text(resp.rows[i].ac);
                    $("#FTime").text(resp.rows[i].fTime+"(H)");
                    $("#commonTime1").text(aaTime);
                    $("#bTime1").text(bbTime);
                    $("#aaaTime").text(aaaTime);
                    $("#bbbTime").text(bbbTime);
                    $("#isDelay1").text(isDelay);
                };
                var url = '/Hbxx/_Index/?id=' + resp.rows[0].mid + "&flightnum=" + resp.rows[0].flightnum;
                   $.ajax({
                    url: '@Url.Action("GetListWithFlightnum")',
                    type: "get",
                    dataType: "Json",
                    success: function (abcd, status)
                    {
                        for (i = 0; i < abcd.rows.length; i++)
                        {
                            var unixtime = abcd.rows[i].aaaTime;
                            var unixTimestamp = new Date(unixtime * 1000);
                            var aaaTime = unixTimestamp.toLocaleString();
                            var unixtime = abcd.rows[i].bbbTime;
                            var unixTimestamp = new Date(unixtime * 1000);
                            var bbbTime = unixTimestamp.toLocaleString();
                            var tr = "<tr ><td>" + abcd.rows[i].flightnum
                                + "</td><td >" + abcd.rows[i].type
                                + "</td><td >" + abcd.rows[i].dayTime
                                + "</td><td >" + abcd.rows[i].starting_point
                                + "</td><td >" + abcd.rows[i].end
                                + "</td><td >" + abcd.rows[i].starting_pointAirport
                                + "</td><td >" + abcd.rows[i].endAirport
                                + "</td><td >" + abcd.rows[i].ac
                                + "</td><td >" + abcd.rows[i].fTime + "(H)"
                                + "</td><td >" + aaaTime
                                + "</td><td >" + bbbTime
                                + "</td><td ><a href=/hbxx/_Index/?id=" + abcd.rows[i].mid + "&flightnum=" + abcd.rows[i].flightnum + ">" + "详情"
                                + "</a></td></tr>"
                            $('.table2').append(tr);
                            if (i == abcd.rows.length - 1)
                            {
                                $('.pages').append(abcd.page + "页");
                                $('.pagess').append(abcd.total + "页");
                            }
                        };
                       

                        //翻页上一页
                        $(function () {
                            $('#btn').click(function () {
                                $.ajax({
                                    'type': 'post', 'url': url,
                                    //传递的数据也可以是序列化之后的json格式数据
                                    //如，上面使用form表单提交数据就可以使用jquery中的serialize()方法将表单进行序列化之后在提交
                                    //data:$('#form').serialize()
                                    'data': {
                                        page: [abcd.page - 1],
                                        searchString:[],

                                    },
                                    error: function (message) {
                                        alert('error!');
                                    }
                                });
                            })
                        })


                        //翻页下一页
                        $(function () {
                            $('#btns').click(function () {
                                $.ajax({
                                    'type': 'post', 'url': url,
                                    //传递的数据也可以是序列化之后的json格式数据
                                    //如，上面使用form表单提交数据就可以使用jquery中的serialize()方法将表单进行序列化之后在提交
                                    //data:$('#form').serialize()
                                    'data': {
                                        page: [abcd.page + 1],
                                        searchString: [],
                                    },
                                    error: function (message) {
                                        alert('error!');
                                    }
                                });
                            })
                        })



                    }
                });


        $.ajax({
        url: '@Url.Action("GetListWithIcao")',
        type: "get",
        dataType: "Json",
        success: function (abc, status)
        {
            var geoCoordMap = {};
            for (var i = 0; i < abc.rows.length; i++)
            {
                //名字。经度 longtitude。纬度latitude。
                geoCoordMap[abc.rows[i].icao] = [abc.rows[i].longtitude, abc.rows[i].latitude, abc.rows[i].name]
            }
            ///在这写
            var myChart = echarts.init(document.getElementById('main'));
            //城市坐标数据
            //planepath是小飞机标签
            var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
            //转换地理坐标数据
            var aaa;
            var bbb;
            var convertData = function (data) {              //起点和终点转换
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                aaa = toCoord[0];
                bbb = toCoord[1];
                return res;
            };

            var color = ['#a6c84c', '#ffa022', '#46bee9'];    //设置默认颜色
            var series = [];
            [['北京', Data]].forEach(function (item, i) {    //设置标点，连线数据。参考文档：http://echarts.baidu.com/option.html#series-lines
                series.push({
                    type: 'lines',
                    coordinateSystem: 'bmap',  //选择坐标系
                    zlevel: 1,
                    effect: {//线特效的配置
                        show: true,
                        period: 6,//特效动画的时间，单位为 s
                        trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                        color: '#fff',

                        symbolSize: 3	//特效标记的大小
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2//特效的曲度，支持从 0 到 1 的值，值越大曲度越大
                        }
                    },
                    data: convertData(item[1])
                },
                    {
                        type: 'lines',
                        coordinateSystem: 'bmap',
                        zlevel: 2,
                        symbol: ['none', 'arrow'],//线两端的标记
                        symbolSize: 3,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbol: planePath,//加载特效小飞机
                            symbolSize: 15//特效小飞机大小
                        },
                        lineStyle: {
                            normal: {
                                color: color[2],
                                width: 1,
                                opacity: 0.6,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                curveness: 0.2//绿色线的曲度，要和上一个的曲度一样
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        type: 'effectScatter',//类型涟漪
                        coordinateSystem: 'bmap',
                        zlevel: 2,
                        rippleEffect: {//波纹的绘制方式，可选 'stroke' 和 'fill'。
                            brushType: 'stroke'
                        },
                        label: {//标签设置
                            normal: {
                                show: true,
                                position: 'start',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] / 16;//涟漪大小
                        },
                        itemStyle: {
                            normal: {
                                color: color[2]
                            }
                        },
                        data: item[1].map(function (dataItem) {

                            return {
                                //name: encoded,
                                name: geoCoordMap[dataItem[1].name][2],
                                value: geoCoordMap[dataItem[1].name]//.concat([dataItem[1].value])
                            };
                        })
                    },
                );
            });

            var option = {

                //标题
                title: {
                    text: '航班航线图',
                    subtext: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                //设置地图样式
                bmap: {
                    center: [aaa,bbb],
                    zoom: 6,
                    roam: true,
                    mapStyle: {
                        styleJson: [
                            {
                                'featureType': 'land',     //调整土地颜色
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#081734'
                                }
                            },
                            {
                                'featureType': 'building',   //调整建筑物颜色
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#04406F'
                                }
                            },
                            {
                                'featureType': 'building',   //调整建筑物标签是否可视
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'highway',     //调整高速道路颜色
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'highway',    //调整高速名字是否可视
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'arterial',   //调整一些干道颜色
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'arterial',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'green',
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'water',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#044161'
                                }
                            },
                            {
                                'featureType': 'subway',    //调整地铁颜色
                                'elementType': 'geometry.stroke',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'subway',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'railway',
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'railway',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'all',     //调整所有的标签的边缘颜色
                                'elementType': 'labels.text.stroke',
                                'stylers': {
                                    'color': '#313131'
                                }
                            },
                            {
                                'featureType': 'all',     //调整所有标签的填充颜色
                                'elementType': 'labels.text.fill',
                                'stylers': {
                                    'color': '#FFFFFF'
                                }
                            },
                            {
                                'featureType': 'manmade',
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'manmade',
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'local',
                                'elementType': 'geometry',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'local',//铁路
                                'elementType': 'labels',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'subway',
                                'elementType': 'geometry',
                                'stylers': {
                                    'lightness': -65
                                }
                            },
                            {
                                'featureType': 'railway',
                                'elementType': 'all',
                                'stylers': {
                                    'lightness': -40
                                }
                            },
                            {
                                'featureType': 'boundary',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#8b8787',
                                    'weight': '1',
                                    'lightness': -29
                                }
                            }]
                    }
                },

                series: series

            };
            myChart.setOption(option);









        },
    });
                //实例化

            },
        });

</script>
